<template>
    <div>
        <!-- inline:行内表单，代表一行可以放置多个表单元素 :model="formInline"   
            model收集表单数据
        -->
        <el-form
            :inline="true"
            class="demo-form-inline"
            :model="cForm"
            :disabled="isUse"
        >
            <el-form-item label="一级分类">
                <!-- @change自定义事件获取option中的value值 -->
                <el-select
                    placeholder="请选择"
                    v-model="cForm.category1Id"
                    @change="getCategory2List"
                >
                    <el-option
                        v-for="(category1Obj, index) in categoryList1"
                        :key="category1Obj.id"
                        :label="category1Obj.name"
                        :value="category1Obj.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="二级分类">
                <el-select
                    placeholder="请选择"
                    v-model="cForm.category2Id"
                    @change="getCategory3List"
                >
                    <el-option
                        v-for="(category2Obj, index) in categoryList2"
                        :key="category2Obj.id"
                        :label="category2Obj.name"
                        :value="category2Obj.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="三级分类">
                <el-select
                    placeholder="请选择"
                    v-model="cForm.category3Id"
                    @change="getFindBaseCategoryList"
                >
                    <el-option
                        v-for="(category3Obj, index) in categoryList3"
                        :key="category3Obj.id"
                        :label="category3Obj.name"
                        :value="category3Obj.id"
                    ></el-option>
                </el-select>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "CategorySelect",
    props: ["isUse"],
    data() {
        return {
            categoryList1: [],
            categoryList2: [],
            categoryList3: [],
            cForm: {
                category1Id: "",
                category2Id: "",
                category3Id: "",
            },
        }
    },
    mounted() {
        // 获取一级分类
        this.getCategory1List()
    },
    methods: {
        // 获取一级分类数据的方法
        async getCategory1List() {
            // 发送请求获取一级分类的数据
            const result = await this.$API.attr.reqCategory1List()
            if ((result.code = 200)) {
                this.categoryList1 = result.data
            }
        },
        // 一级分类事件回调
        // 获取二级分类数据的方法 category1Id 目前选中的一级id值（el-option的value值）
        async getCategory2List(category1Id) {
            // 每次修改一级分类，清空二、三级之前的数据
            this.categoryList2 = []
            this.categoryList3 = []
            this.cForm.category2Id = ""
            this.cForm.category3Id = ""
            // 传递给自定义事件参数
            this.$emit("getCategoryId", {
                categoryId: this.cForm.category1Id,
                level: 1,
            })
            // 发送请求获取二级分类的数据
            const result = await this.$API.attr.reqCategory2List(category1Id)
            if ((result.code = 200)) {
                this.categoryList2 = result.data
            }
        },
        // 二级分类事件回调
        // 获取三级分类数据的方法 category2Id 目前选中的二级id值（el-option的value值）
        async getCategory3List(category2Id) {
            // 每次修改二级分类，清空三级之前的数据
            this.categoryList3 = []
            this.cForm.category3Id = ""
            // 传递给自定义事件参数
            this.$emit("getCategoryId", {
                categoryId: this.cForm.category2Id,
                level: 2,
            })
            // 发送请求获取三级级分类的数据
            const result = await this.$API.attr.reqCategory3List(category2Id)
            if ((result.code = 200)) {
                this.categoryList3 = result.data
            }
        },
        // 三级事件回调
        // 触发自定义事件将三个id传过去，用来作为接口的请求参数
        getFindBaseCategoryList() {
            // 传递给自定义事件参数
            this.$emit("getCategoryId", {
                categoryId: this.cForm.category3Id,
                level: 3,
            })
        },
    },
}
</script>

<style scoped>
</style>